<template>
	<view>
		<quick-button></quick-button>
		<view class="content">
			<view style="height: 258px; padding-bottom: 20rpx">
				<swiper style="height: 258px" border-radius="0" indicator-color="#fff" indicator-active-color="#8df"
					:current="current" :autoplay="false" :interval="intervalTime" @change="swiperChange">
					<block v-for="(item, index) in bannerList" :key="index">
						<swiper-item class="swiper-item" v-if="item.type === 'image'">
							<image :src="item.url" mode="aspectFill" />
						</swiper-item>
						<swiper-item class="swiper-item" v-else-if="item.type === 'video'">
							<video :show-center-play-btn="true" :controls="false" :loop="true" :id="'myVideo' + index" :src="item.url"
								:muted="true" :autoplay="false" :show-progress="false" style="height: 100%" @ended="videoEnd"
								@timeupdate="handleTimeUpdate(index)"></video>
						</swiper-item>
					</block>
				</swiper>
				<view class="switch-view">
					<view class="switch-btn" @click="switchStatus">
						<text>切换关怀版</text>
						<image src="../../../static/icon/switch_arrow_icon.png" style="width: 40rpx; height: 40rpx"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<view class="column">
				<view class="ad-box">
					<u-swiper height="70" :list="bannerStrList" @click="bannerClickHandle"></u-swiper>
				</view>
				<view class="column-box">
					<view class="onebox" @click="goRecord(item.value)" v-for="(item, index) in menuList" :key="index">
						<view style="flex-direction: row; align-items: center">
							<view><text>{{ item.value }}</text></view>
							<view class="margin-top-16"><text style="font-size: 22rpx; color: #9fa0a0">{{ item.remake }}</text>
							</view>
						</view>
						<view class="margin-left-10">
							<image :src="item.img" mode=""></image>
						</view>
					</view>
					<!-- <view class="onebox" @click="goMb">
						<view style="flex-direction: row; align-items: center">
							<view><text>慢病管护</text></view>
							<view class="margin-top-16"><text style="font-size: 22rpx; color: #9fa0a0">创面患者诊疗服务</text>
							</view>
						</view>
						<view class="margin-left-10">
							<image src="@/static/home/image7.png" mode=""></image>
						</view>
					</view>
					<view class="onebox" @click="goYhsd">
						<view style="flex-direction: row; align-items: center">
							<view><text>护士上门</text></view>
							<view class="margin-top-16"><text style="font-size: 22rpx; color: #9fa0a0">专业、专心、专注</text>
							</view>
						</view>
						<view class="margin-left-10">
							<image src="@/static/home/image6.png" mode=""></image>
						</view>
					</view>
					<view class="onebox" @click="goJzfw">
						<view style="flex-direction: row; align-items: center">
							<view><text>护工上门</text></view>
							<view class="margin-top-16"><text style="font-size: 22rpx; color: #9fa0a0">您的贴心家政服务</text>
							</view>
						</view>
						<view class="margin-left-10">
							<image src="@/static/home/image2.png" mode=""></image>
						</view>
					</view>

					<view class="onebox" @click="goYyjg">
						<view style="flex-direction: row; align-items: center">
							<view><text>医养机构</text></view>
							<view class="margin-top-16"><text style="font-size: 22rpx; color: #9fa0a0">选择专业医养机构</text>
							</view>
						</view>
						<view class="margin-left-10">
							<image src="@/static/home/image4.png" mode=""></image>
						</view>
					</view>
					<view class="onebox" @click="goFZ">
						<view style="flex-direction: row; align-items: center">
							<view><text>辅具租赁</text></view>
							<view class="margin-top-16"><text style="font-size: 22rpx; color: #9fa0a0">助老设备租赁专区</text>
							</view>
						</view>
						<view class="margin-left-10">
							<image src="@/static/home/image3.png" mode=""></image>
						</view>
					</view>
					<view class="onebox" @click="goYYPZ">
						<view style="flex-direction: row; align-items: center">
							<view><text>医院陪诊</text></view>
							<view class="margin-top-16"><text style="font-size: 22rpx; color: #9fa0a0">医院陪诊</text>
							</view>
						</view>
						<view class="margin-left-10">
							<image src="@/static/home/image5.png" mode=""></image>
						</view>
					</view>
					<view class="onebox" @click="goMb">
						<view style="flex-direction: row; align-items: center">
							<view><text>康复</text></view>
							<view class="margin-top-16"><text style="font-size: 22rpx; color: #9fa0a0">康复</text>
							</view>
						</view>
						<view class="margin-left-10">
							<image src="@/static/home/image7.png" mode=""></image>
						</view>
					</view> -->
				</view>
			</view>
			<view class="search-list">
				<u-search :showAction="true" @custom="searchHandle" @search="searchHandle" v-model="searchQuery" actionText="搜索"
					@clear="searchHandle" :animation="true"></u-search>
				<view>
					<view class="search-list-title">热门搜索</view>
					<view class="hot-searches">
						<text v-for="(hotSearch, index) in hotSearches" :key="index"
							:class="{ 'hot-search': true, active: hotSearch === searchQuery }" @click="selectHotSearch(hotSearch)">
							{{ hotSearch }}
						</text>
					</view>
					<view style="display: flex;">
						<view class="onebox" @click="goJkkp" style="height:120rpx ;">
							<view class="margin-left-10">
								<image src="@/static/home/jjkp.png" mode=""></image>
							</view>
							<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
								<view><text>健康科普</text></view>
								<view class="margin-top-16"></view>
							</view>
						</view>
						<view class="onebox" @click="goJkgj" style="height:120rpx ;">
							<view class="margin-left-10">
								<image src="@/static/home/jjgj.png" mode=""></image>
							</view>
							<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
								<view><text>健康小工具</text></view>
								<view class="margin-top-16"></view>
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="list-container">
					<view v-if="items.length">
						<view @click="goDetails(item)" v-for="(item, index) in items" :key="index" class="list-item">
							<image :src="item.pic" class="item-image"></image>
							<view class="item-title">{{ item.title }}</view>
							<view class="item-time" v-if="item.time">
								<p>{{ item.time }}</p>
							</view>
						</view>
					</view>
					<view v-else>
						<u-empty mode="search" text="暂无数据"> </u-empty>
					</view>
					<u-loading-icon :show="showLoading"></u-loading-icon>
				</scroll-view>
				<view @click="goLogin" class="toLogin">
					<view>跳转登录查看更多内容>></view>
				</view>
			</view>
			<view class="xieybox">
				<text @click="goUserXy">《用户协议》</text>
				<text @click="goYingsi">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDiscountBanner,
		getBanner,
		getTipsList,
		getMenuList,
		getLoginParams
	} from '@/api/feixiang/application.js'
	import {
		getToken
	} from "@/utils/auth.js"
	export default {
		data() {
			return {
				bannerList: [], //轮播图片
				showFirstLoginModal: false, //首次弹框
				bannerCouponList: [],
				bannerStrList: [],
				menuList:[],
				videoContext: null,
				current: 0,
				intervalTime: 5000,
				videoPlay: false,
				items: [],
				searchQuery: '',
				hotSearches: ['糖尿病', '高血压', '冠心病'],
				showLoading: false,
				userId: '',
				source: '',
				phoneNum: '',
				token: getToken(),
			}
		},
		created() {
			this.phoneNum = uni.getStorageSync('PHONE')
			console.log("当前用户的手机号：" + this.phoneNum)
			this._getDiscountBanner()
			this._getBanner()
			this._getTipsList()
			this.getLoginInfo()
			this._getMenuList()
		},
		mounted() {
			this.videoContext = uni.createVideoContext('myVideo0', this)
			this.videoContext.play()
		},
		methods: {
			switchStatus() {
				uni.setStorageSync('app_status_key', '关怀版')
				const pages = getCurrentPages()
				const currentPage = pages[0]
				uni.redirectTo({
					url: `/${currentPage.route}`
				})
				// #ifdef H5
				location.reload()
				// #endif
			},
			// 跳转隐私政策
			goYingsi() {
				uni.navigateTo({
					url: '/sickbed/pages/feixiang/home/yinsiXieYi'
				})
			},
			// 跳转用户协议
			goUserXy() {
				uni.navigateTo({
					url: '/sickbed/pages/feixiang/home/userXieYi'
				})
			},
			goYlzz() {
				uni.navigateTo({
					url: '/pages/feixiang/home/ylzz'
				})
			},
			goZlsb() {
				uni.navigateTo({
					url: '/pages/feixiang/home/zlsb'
				})
			},
			
			goZcfw() {
				uni.navigateTo({
					url: '/pages/feixiang/home/zcfw'
				})
			},
			goYYPZ() {
				uni.redirectTo({
					url: '/nursingWorkerPages/pages/index/vndex'
				})
			},
			clickNoneContent() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
			goRecord(value) {
				if(value=='家庭病床'){
				uni.redirectTo({
					url: '/sickbed/pages/feixiang/application-record/application-record'
				})	
				}else if(value=='慢病管护'){
					uni.redirectTo({
						url: '/chronicDisease/pages/home/index'
					})
				}else if(value=='医护上门'){
					uni.redirectTo({
						url: '/patientAppPages/pages/index',
					})
				}else if(value=='护工上门'){
					uni.redirectTo({
						url: '/nursingWorkerPages/pages/index/index'
					})
				}else if(value=='医养机构'){
					uni.navigateTo({
						url: '/medicalMaintenance/pages/index'
					})
				}else if(value=='辅具租赁'){
					uni.navigateTo({
						url: '/accessoryRentalPages/pages/index/testIndex'
					})
				}else if(value=='陪护陪诊'){
					uni.redirectTo({
						url: '/nursingWorkerPages/pages/index/vndex'
					})
				}else if(value=='康复'){
					uni.redirectTo({
						url: '/chronicDisease/pages/home/index'
					});
				}
				
			},
			goYhsd() {
				uni.redirectTo({
					url: '/patientAppPages/pages/index',
						// url: "/patientAppPages/pages/hospitail/hospitail?hospitalName=" + '西安高新医院'
						// url: "/patientAppPages/pages/nurse-profile/index?NurseName=" + '陶瑾'
				})
			},
			async _getDiscountBanner() {
				let res = await getDiscountBanner()
				this.bannerStrList = res.data.map(item => {
					return item.picImg
				})
				this.bannerCouponList = res.data
			},
			async _getBanner() {
				let res = await getBanner()
				this.bannerList = res.data

			},
			async _getMenuList() {
				let res = await getMenuList()
				this.menuList = res.data
			
			},
			bannerClickHandle(index) {
				let link = this.bannerCouponList[index].articleContent
				uni.navigateTo({
					url: `/sickbed/pages/feixiang/web-view/web-view?url=${encodeURIComponent(link)}&title=${this.bannerCouponList[index].articleTitle}`
				})

			},
			bannerVideoHandle(item) {
				uni.previewImage({
					urls: [item.url]
				})

			},
			videoEnd() {
				this.$nextTick(() => {
					uni.createVideoContext(`myVideo${this.current}`, this).stop()
					if (this.current == this.bannerList.length - 1) {
						this.current = 0
						uni.createVideoContext(`myVideo${this.current}`, this).play()
					} else {
						this.current += 1
						uni.createVideoContext(`myVideo${this.current}`, this).play()
					}
				})
			},
			handleTimeUpdate(e) {},
			swiperChange(e) {
				this.current = e.detail.current
				uni.createVideoContext(`myVideo${this.current}`, this).play()
				this.bannerList.forEach((item, index) => {
					if (item.type == 'video') {
						let temp = 'myVideo' + index
						if (index == this.current) {
							uni.createVideoContext('myVideo' + this.current, this).play()
						} else {
							uni.createVideoContext(temp, this).pause()
						}
					}

				})
			},

			// 搜索列表
			async _getTipsList() {
				let that = this
				that.items = []
				that.showLoading = true
				let str = that.searchQuery.trim()
				let res = await getTipsList({
					key: str,
					limit: 3,
					start: 1
				})
				that.items = res.data
				that.showLoading = false

			},
			searchHandle() {
				uni.navigateToMiniProgram({
					appId: 'wxb749c5b8e8473763',
					path: `page/attention/attention`, // 目标页面路径
					envVersion: 'release', // 可选值：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 成功跳转
						console.log('跳转成功', res)

					},
					fail(err) {
						// 跳转失败
						console.error('跳转失败', err)
					}
				})
				//this._getTipsList()
			},
			selectHotSearch(hotSearch) {

				//this.searchQuery = hotSearch
				//this._getTipsList()
			},
			goDetails(item) {
				uni.navigateToMiniProgram({
					appId: 'wxb749c5b8e8473763',
					path: `page/article/article?articleId=${item.articleid}`, // 目标页面路径
					extraData: {
						articleld: item.articleid
					},
					envVersion: 'release', // 可选值：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 成功跳转
						console.log('跳转成功', res)
					},
					fail(err) {
						// 跳转失败
						console.error('跳转失败', err)
					}
				})
			},
			goLogin() {

				console.log(this.token)
				if (!this.token) {

					uni.showToast({
						icon: 'none',
						title: '请重新登录!',
						delay: 1500
					});
					setTimeout(() => {
						uni.setStorageSync("nav_to_index_index", 1)
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 1500)
					return
				} else {
					uni.navigateToMiniProgram({
						appId: 'wxb749c5b8e8473763',
						path: `manage/ThirdPartyRedirection/ThirdPartyRedirection?userid=${this.userId}&source=${this.source}`, // 目标页面路径
						envVersion: 'release', // 可选值：develop（开发版），trial（体验版），release（正式版）
						success(res) {
							// 成功跳转
							console.log('跳转成功', res)

						},
						fail(err) {
							// 跳转失败
							console.error('跳转失败', err)
						}
					})
				}
			},
			goJkkp() {
				uni.navigateToMiniProgram({
					appId: 'wxb749c5b8e8473763',
					path: `page/kno/kno`, // 目标页面路径
					envVersion: 'release', // 可选值：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 成功跳转
						console.log('跳转成功', res)

					},
					fail(err) {
						// 跳转失败
						console.error('跳转失败', err)
					}
				})
			},
			goJkgj() {
				uni.navigateToMiniProgram({
					appId: 'wxb749c5b8e8473763',
					path: `manage2/healthlist/healthlist`, // 目标页面路径
					envVersion: 'release', // 可选值：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 成功跳转
						console.log('跳转成功', res)

					},
					fail(err) {
						// 跳转失败
						console.error('跳转失败', err)
					}
				})
			},
			// 获取跳转信息
			async getLoginInfo() {
				//console.log("当前用户的手机号1：" + this.phoneNum)
				let res = await getLoginParams({
					phone: this.phoneNum
				})
				this.source = res.data.source
				this.userId = res.data.userid
			}
		}
	};
</script>

<style scoped lang="scss">
	.margin-top-16 {
		margin-top: 2rpx;
	}

	.margin-left-10 {
		margin-left: 12rpx;
	}

	.gview {
		margin-left: 34rpx;
		margin-right: 34rpx;
		background-color: #fff;
		height: 120rpx;
		border-radius: 60rpx;
		margin-top: 40rpx;
		box-shadow: 0rpx 5rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);
		display: flex;
	}

	.xieybox {
		bottom: 30rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 50rpx;

		text {
			font-size: 32rpx;
			color: #00bcb2;
		}
	}

	.onebox {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 320rpx;
		height: 180rpx;
		border-radius: 20rpx;
		margin: 0 0 30rpx 0;
		background-color: #fff;
		box-shadow: 0rpx 5rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);

		image {
			width: 60rpx;
			height: 60rpx;
		}

		text {
			margin: 40rpx 0 0;
			font-size: 34rpx;
		}
	}

	.column {
		position: relative;
		// margin-top: -15px;
		border-radius: 40rpx;
		padding: 30rpx 40rpx 0;
		font-family: Alibaba, Alibaba-PuHuiTi-M;
		font-weight: normal;
		background: #f7f7f7;
	}

	.column-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.text2 {
		margin: 10rpx 0 0;
		font-size: 32rpx;
		color: rgb(105, 105, 105);
	}

	.text1 {
		color: rgb(102, 102, 102);
		font-size: 44rpx;
		font-weight: 500;
	}

	.content {
		background-color: #f7f7f7;
		min-height: 100vh;
		width: 100vw;
		position: relative;
	}

	.box1 {
		padding: 100rpx 0 0 50rpx;
	}

	.first-dialog-view {
		width: 80%;
		border-radius: 20%;
		padding: 10rpx;
	}

	.switch-view {
		width: 100%;
		height: 138rpx;
		position: absolute;
		z-index: 2;
		top: 0;

		.switch-btn {
			// width: 180rpx;
			// height: 43rpx;
			padding: 10rpx 20rpx;
			background: #00bbb0;
			position: absolute;
			right: 22rpx;
			top: 33rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

	.contact-btn {
		position: fixed;
		right: 10rpx;
		bottom: 300rpx;
		background: url("@/patientAppPages/static/icon_kefu.png") no-repeat center center;
		background-size: 80% 80%;
		width: 100rpx;
		height: 100rpx;
		z-index: 999;
	}

	.ad-box {
		color: #3333;
		// margin: 0 10rpx;
		height: 70px;
		margin-bottom: 20rpx;
	}

	::v-deep.uni-swiper-dot {
		/* 调整指示点的位置 */
		bottom: 300px;
		/* 根据需要调整距离 */
	}

	/* 使用深度选择器来覆盖默认样式 */
	::v-deep .wx-swiper-dots-horizontal {
		bottom: 40rpx;
		/* 调整指示点距离底部的距离 */
	}

	.video-player {
		width: 100%;
		height: 100%;
		position: absolute;
		/* 使用绝对定位 */
		top: 0;
		left: 0;
		z-index: 10;
		/* 提高 z-index 值 */
	}

	.swiper-video {
		height: 100%;
		position: relative;
		/* 确保内部元素相对定位 */
	}

	.search-list {
		padding: 20rpx;
		margin-left: 34rpx;
		margin-right: 34rpx;
		background-color: #fff;
		height: 840rpx;
		border-radius: 30rpx;
		box-shadow: 0rpx 5rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);
		margin-top: 10rpx;

		.search-input {
			width: 100%;
			height: 40rpx;
			margin-bottom: 20rpx;
			padding: 10prx;
			border: 1px solid #ccc;
			border-radius: 5rpx;
		}

		.list-container {
			height: 460rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.list-item {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 10rpx;
			border-bottom: 1rpx solid #eee;
			height: 150rpx;
		}

		.item-image {
			// width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 5rpx;
			width: 15%;
		}

		.item-title {
			font-size: 25rpx;
			font-weight: bold;
			width: 80%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-time {
			width: 25%;
			font-size: 18rpx;
			color: #999;
			display: flex;
			align-items: flex-end;
			height: 100%;
		}
	}

	.hot-searches {
		margin-bottom: 20px;
	}

	.search-list-title {
		font-weight: 700;
		padding: 20rpx;
		padding-left: 55rpx;
		background: url("../../../static/icon_remen.png") left center no-repeat;
		background-size: 40rpx 40rpx;
	}

	.hot-search {
		display: inline-block;
		padding: 5px 10px;
		margin-right: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		cursor: pointer;
	}

	.hot-search.active {
		background-color: #b4faf3;
		// color: white;
		// border-color: #007aff;
	}

	.uni-easyinput__content .is-input-border {
		border-color: #dcdfe6 !important;
	}

	.toLogin {
		display: flex;
		height: 1%;
		justify-content: center;
		align-items: center;
	}
</style>